/**
 * SPDX-FileCopyrightText: 2023-2025 Sangfor Technologies Inc.
 * SPDX-License-Identifier: Mulan PSL v2
 */
<template>
    <div class="flow-common-top__container">
        <div class="flow-common-top">
            <div class="left">
                <span
                    :title="_('返回AI Flow')"
                    class="icon iconfont iconsip-return"
                    @click="_returnProject"></span>
                <div class="title">
                    <sf-editor ref="editor"
                               v-model="flowName"
                               vtype="name"
                               @hide="_updateFlowName" />
                </div>
            </div>
            <div class="right">
                <sf-button
                    class="creat-button btn-blank"
                    icon-cls="iconcomp-history"
                    @click="_handleHistoryDetail">
                    <lang>历史版本</lang>
                </sf-button>
            </div>
        </div>
        <project-nav />
        <sf-drawer
            :title="title"
            :visible.sync="showHistroyDrawer"
            :size="drawWidth"
            custom-class="history-detail__container"
            :direction="direction">
            <div class="history-detail__content">
                <history-version
                    ref="historyVersion"
                    @close-drawer="handleRollback" />
            </div>
        </sf-drawer>
    </div>
</template>
<script lang="ts">
import projectNav from './project_nav.vue';
import HistoryVersion from './history_version.vue';

import { deepClone } from 'src/util/deep_clone';
import { Component, Vue, Prop, Watch } from 'vue-property-decorator';

import store from 'src/vuex/store';
let userID = store.state.userId;

import trainingUrlAdapter from 'src/home/mod_common/training_url_adapter';
const FLOW_URL = {
    get: trainingUrlAdapter('flow'),
    put: trainingUrlAdapter('flow'),
    post: trainingUrlAdapter(`user/${userID}/flow`)
};

@Component({
    components:{
        projectNav,
        HistoryVersion
    }
})
export default  class FlexCommonTop extends Vue {
     @Prop({
        type:Boolean,
        default:false
    }) totalFlag!: boolean

    flowName = ''
    direction = 'rtl'
    showHistroyDrawer = false
    title = _('历史版本')
    searchParams =  {
        pageSize: 10,
        pageNum: 0,
        keyword:''
    }
    aiFlowId = ''

    get drawWidth () {
        return 'calc(100% - 220px)';
    }
    get projectId () {
        return this.$route.query.projectId || '';
    }
    get aiFlowType () {
        return +this.$route.query.aiFlowType || 0;
    }

    mounted (): void {
        this.flowName = this.$route.query.flow_name as string;
        this.aiFlowId = this.$route.query.aiFlowId as string || '';
    }

    @Watch('totalFlag', {immediate:true})
    totalFlagChange () {
        if (this.totalFlag) {
            this.getVersionTotal();
        }
    }

    // @Watch('flowName', {deep:true})
    // flowNameChange () {
    //     this.$emit('flow-name', this.flowName);
    // }

    async getVersionTotal () {
        this.$mask();
        let aiFlowID = this.$route.query.aiFlowId;
        if (aiFlowID) {
            // @ts-ignore
            this.searchParams.flowId = aiFlowID;
            let jsonData = await this.$ajax.get(`${FLOW_URL.get}/${aiFlowID}/snapshots`, this.searchParams);
            this.$unmask();
            let {success, msg, data} = jsonData;
            if (!success) {
                this.$showErr(msg || _('加载数据失败'));
                return;
            }
            this.$emit('version-total', data.total);
        }

    }
    _returnProject () {
        let query = deepClone(this.$route.query);
        if (query.flow_name) {
            delete query.flow_name;
            delete query.aiFlowSnapshotId;
            delete query.aiFlowId;
        }

        this.$router.push({
            path: '/project_manager/project_index/visual_ai_flow',
            query
        });
    }
    _handleHistoryDetail () {
        this.showHistroyDrawer = true;
        // @ts-ignore
        this.$refs.historyVersion.refreshGrid();

    }
    handleCancel () {
        this.showHistroyDrawer = false;
    }
    handleRollback (flag: boolean, data: SafeAny) {
        this.showHistroyDrawer = flag;
        this.$emit('roll-back', data);
    }

    //修改路由
    _editRouter () {

        //修改路由，给刷新使用
        let query = JSON.parse(JSON.stringify(this.$route.query));
        query.flow_name = this.flowName;
        query.aiFlowId = this.aiFlowId;
        this.$router.push({path:this.$route.path, query});
    }
    async _updateFlowName () {
        let aiFlowParams = {
            flowName:this.flowName,
            projectId:this.projectId,
            aiFlowType:this.aiFlowType
        };
        let jsonData;
        let aiFlowID = this.$route.query.aiFlowId;
        if (aiFlowID) {
            jsonData = await this.$ajax.put(`${FLOW_URL.put}/${aiFlowID}`, aiFlowParams);
        } else {
            jsonData = await this.$ajax.post(FLOW_URL.post, aiFlowParams);
        }
        let {success, msg, data} = jsonData;
        if (!success) {
            this.$showErr(msg || _('更新AI Flow失败'));
            return false;
        };
        if (!this.aiFlowId) {
            this.aiFlowId = data.id;
        }
        this._editRouter();
    }
};
</script>
<style lang="less">
.history-detail__container{
    height: 100%;
    .sfv-scrollbar-body{
        height: 100%;
        .sf-drawer__body{
            height: 100%;
        }
    }
    .history-detail__content{
        height: 100%;

    }
    .sf-drawer__header{
        font-size: 16px;
        color: #14161A;
    }
}
.flow-common-top__container{
    .flow-common-top {
        margin:0 12px;
        height: 48px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        background: #fff;
        .left{
             display: flex;
             align-items: center;
        }
    //    .sfv-editor_tip-box{
    //        .sfv-editor_icon-box{
    //            display: none;
    //        }
    //        &:hover{
    //            .sfv-editor_icon-box{
    //                 display: block;
    //             }
    //        }
    //    }
        .iconsip-return{
            font-size: 18px;
            cursor: pointer;
            color: #204ED9;
            position: relative;
            margin-right: 20px;

            &::after{
                content: '';
                background: #E0E0E0;
                width: 1px;
                height: 16px;
                position: absolute;
                left: 30px;
                top: 2px;
            }
            // &:hover{
            //    color: #204ED9;
            // }
        }
        .title {
            .sfv-editor_italic{
                font-size: 16px;
                color: #14161A;
                font-style: normal;
            }
        }
    }
}

</style>
